<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translate(-50%);
        }

        ul li {
            width: 20px;
            background-color: rgb(255, 255, 255);
            height: 20px;
            border-radius: 50%;
            margin-left: 15px;
            float: left;
            transition: all 2s;
            color: white;

        }

        .box {
            position: relative;
            margin: 100px auto;
            width: 600px;
            height: 350px;
            background-color: skyblue;
            transition: all 2s;

        }

        .box .left {
            color: white;
            padding: 20px;
            font-size: 40px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            /* 鼠标放到到箭头上边小手 */
            cursor: pointer;
            background: transparent;
            transition: all 1s;

        }

        .box .right {
            color: white;
            padding: 20px;
            font-size: 40px;
            position: absolute;
            top: 50%;
            right: 0;
            /* 鼠标放到到箭头上边小手 */
            cursor: pointer;
            transform: translateY(-50%);
            background: transparent;
            transition: all 1s;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>
<script>
    class box {
        // =============================添加属性=============================
        constructor(boxEle, leftEle, rightEle, lis) {
            this.boxEle = boxEle
            this.leftEle = leftEle
            this.rightEle = rightEle
            this.lis = lis
            this.index = 1 //==============图片计数，相当于索引=================
            this.innr = 0 //================亮点的计数，相当于索引==============
            this.stoped = null
            this.render()//=================渲染图片===========================
            this.Lunb()//======================循环轮播图======================
            this.bindevent()//===========  ====点击事件========================
            this.over()//===================划入事件============== ============
            this.out()//===================划出事件============================
            this.rbpints()//============使开始界面就渲染亮点（亮点）===========
            this.bpints()//=================亮点点击事件=======================
        }

        // ==============================设置下一张==========================
        next() {
            if (this.index >= this.lis.length) {
                this.index = 1
            } else {
                this.index++
            }
            if (this.innr >= this.lis.length - 1) {
                this.innr = 0
            } else {
                this.innr++
            }
            this.render()
        }

        // ===============================上一页==============================
        upper() {
            if (this.index <= 1) {
                this.index = this.lis.length
            } else {
                this.index--
            }
            if (this.innr <= 0) {
                this.innr = this.lis.length - 1
            } else {
                this.innr--
            }
            this.render()
        }

        // =================================亮点点击事件============================
        bpints() {
            for (let i = 0; i < this.lis.length; i++) {
                this.lis[i].onclick = () => {
                    this.innr = i// 因this.innr初始值为0，而索引刚好为零，i直接赋值调用亮点即可
                    this.index = i+1//因this.index 控制图片编号，则初始值为1，所以i是从0开始的，因这里需要赋值后+1，但每次一轮之后就会丢失一次过渡效果
                    console.log('这是亮点点击之后的',this.index);
                    this.render()
                    this.rbpints()
                }
            }
        }

        // =================================渲染亮点============================
        rbpints() {
            // 渲染所有的亮点，使当前的亮点亮，其余的变白色
            for (let i = 0; i < this.lis.length; i++) {
                this.lis[i].style.background = 'white'
                // console.log('点击的亮点索引',this.lis);
            }
            this.lis[this.innr].style.background = 'skyblue'
        }
        // ==================================渲染图片===========================
        render() {
            // 给最大的盒子添加背景图片
            this.boxEle.style.backgroundImage = `url(./img/pic${this.index}.jpg)`
        }
        // ===============================循换轮播=============================
        Lunb() {
            this.stoped = setInterval(() => {
                this.next()
                this.render()
                this.rbpints()
            }, 2000)
        }

        // ==============================点击事件===============================
        bindevent() {
            // ============================右键点击事件========================
            this.rightEle.onclick = () => {
                this.next()//点击右键需要渲染下一页
                this.rbpints()//还要渲染亮点颜色 、次次渲染是必须要有的
            }
            //===========================左键点击事件==========================
            this.leftEle.onclick = () => {
                this.upper()//点击左键键需要渲染上一页
                this.rbpints()//还要渲染亮点颜色、次次渲染是必须要有的
            }
        }

        // ================================滑入事件============================
        over() {
            boxEle.onmouseover = () => {//======================鼠标划入盒子事件
                clearInterval(this.stoped)
            }
            leftEle.onmouseover = () => {//=======================鼠标划入左键事件
                leftEle.style.background = 'white';
                leftEle.style.color = 'black';
            }
            rightEle.onmouseover = () => {//======================鼠标划入右键事件
                rightEle.style.background = 'white';
                rightEle.style.color = 'black';
            }
        }

        // ================================滑出事件===========================
        out() {
            boxEle.onmouseout = () => {//=================鼠标划出盒子事件
                this.Lunb()
            }
            leftEle.onmouseout = () => {//===============鼠标划出左键事件
                leftEle.style.background = ' transparent';
                leftEle.style.color = 'white';
            }
            rightEle.onmouseout = () => {//==================鼠标划出右键事件
                rightEle.style.background = ' transparent';
                rightEle.style.color = 'white';
            }
        }
    }
    let boxEle = document.querySelector('.box')
    let leftEle = document.querySelector('.left')
    let rightEle = document.querySelector('.right')
    let lis = document.querySelectorAll('li')
    let boxx = new box(boxEle, leftEle, rightEle, lis)
</script>


<!-- 
1.先获取标签使用的所有标签
2.将获取到的表现以实参的方式传入class里，渲染，给最大的盒子添加背景图片和亮点（如果不能使用同一个索引，那就创建两个）
3.创建自动轮播图，并创建划入画出效果
4.创建下一页事件和右键点击事件绑定，同理左键点击事件，，，需要注意每词轮到第一页到最后一页时的if语句
5.创建点级按钮和亮点并列效果
6.给亮点增加滑动谁亮谁的效果
7.给点亮增加点击事件，需要和亮点渲染事件还有图片渲染事件共同绑定
-->